<template>
  <div>
    <div class="intro hidden-xs-only" v-loading="loading">
      <!-- <el-row class="row-bg" :gutter="10"> -->
      <waterfall
        :col="col"
        :width="itemWidth"
        :gutterWidth="gutterWidth"
        :data="data"
        @loadmore="loadmore"
        @scroll="scroll"
      >
        <template>
          <div class="cell-item" v-for="(item, index) in data" :key="index">
              <div >
                <img :src="item.piclink" class="imgs" />
              </div>
          </div>
        </template>
      </waterfall>
      <!-- <el-col :span="8" class='marTT'  v-for='(item,index) in imgList' :key='index'>
          <el-card
            class="box-card padd"
            shadow="always"
            :body-style="{ padding: '0px' }"
          >
            <el-col :span="24" >
              <img :src="item.piclink" class="donszCl">
            </el-col>
          </el-card>
        </el-col> -->
      <!-- </el-row> -->
    </div>
    <div class="intro1 hidden-sm-and-up" v-loading="loading">
      <waterfall
        :col="1"
        :width="itemWidth"
        :gutterWidth="gutterWidth"
        :data="data"
        @loadmore="loadmore"
        @scroll="scroll"
      >
        <template>
          <div class="cell-item" v-for="(item, index) in data" :key="index">
              <div >
                <img :src="item.piclink" class="imgs" />
              </div>
          </div>
        </template>
      </waterfall>
      <!-- <el-row class="row-bg" :gutter="10"> -->
        <!-- <el-col
          :span="24"
          class="marTT"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <el-card
            class="box-card padd"
            shadow="always"
            :body-style="{ padding: '0px' }"
          >
            <el-col :span="24">
              <img :src="item.img" class="donszCl" />
            </el-col>
          </el-card>
        </el-col> -->
      <!-- </el-row> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "homepage",
  data() {
    return {
      data: [],
      col: 3,
      loading: false,
    };
  },
  computed: {
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    scroll(scrollData) {
      console.log(scrollData);
    },
    switchCol(col) {
      this.col = col;
      console.log(this.col);
    },
    loadmore(index) {
      this.data = this.data.concat(this.data);
    },
    getList() {
      this.loading = true;
      this.$axios
        .get(`/baseInfo/consult/getHbList`)
        .then((response) => {
          this.loading = false;
          console.log(response.data);
          this.data = response.data.data;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.imgs{
  width: 200px;
  padding-left: 40px;
  padding-top: 40px;
}
.marTT {
  text-align: center;
  margin-top: 30px;
}
.donszCl {
  width: 200px;
  height: 200px;
}
.intro {
  width: 1140px;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 15px;
  line-height: 29px;
}
.intro1 {
  padding: 0;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 15px;
  line-height: 29px;
}
</style>